<template>
  <div id="exhibition1"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb3.png" />
                  基本信息
             </div>          
         </div>
         <div class="box">
              <div class="box_top">
                <div class="box_top_img">
                   <img src="@/assets/images/echarts_tb3.png" />
                </div>
                <div class="box_top_con">
                   <div class="box_top_name">{{ mp_form.text1 }}</div>
                   <div class="box_top_id">ID:{{ mp_form.text4 }}</div>
                </div>
              </div>
              <div class="box_bottom">
                     <div class="box_bottom_con1" style="flex:1.5;border-right: 2px dashed #BFBFBF;margin-right:50px;">
                         <div class="box_bottom_con1_name">客户总数</div>
                         <div class="box_bottom_con1_number">{{ mp_form.member_count }}</div>
                     </div>
                     <div class="box_bottom_con1">
                         <div class="box_bottom_con1_name">客服名片</div>
                         <div  class="box_bottom_con1_img">
                          <el-image 
                            :src="mp_form.images" 
                            :preview-src-list="mp_form.mplist" class="img imga">
                          </el-image>
                         
                         </div>
                     </div>
                     <div class="box_bottom_con1">
                         <div class="box_bottom_con1_name">二维码</div>
                          <div class="box_bottom_con1_img">
                             <el-image 
                            :src="mp_form.ewm_tb" 
                            :preview-src-list="mp_form.ewm_imageslist" class="img imga">
                             </el-image>
                         </div>
                     </div>
              </div>
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'exhibition1',
  data () {
    return {
      list_data:'',
      form:{
        time:''
      },
      
      mp_form:{
        mplist:[],  
        images: require('@/assets/images/a1.png'),
        ewm_images: require('@/assets/images/a3.png'), 
        ewm_imageslist:[],
        ewm_tb:require('@/assets/images/a2.png'),
        tx_images: require('@/assets/images/a2.png'),
        text1:'王炎炎', //姓名
        text2:'客服',
        text3:'18242313000',  //手机号
        text4:'41541646',  //ID
        member_count:0 //客户总数
      },
     
    }
  },
   components:{

  },
  created(){
      this.form.time = this.getNowDate1()
      this.list_fun()
  },
 
  mounted() {
   
  },
  methods: {
    list_fun(){
          this.post("/business_management/infoOfCustomer", {
	        }).then(res => {
             this.mp_form.text1 = res.result.name
             this.mp_form.text3 = res.result.telphone
             this.mp_form.text4 = res.result.invite_id
             this.mp_form.ewm_images = this.urlimg + res.result.qr_code
             this.mp_form.ewm_imageslist = [this.urlimg + res.result.qr_code]  
             this.mp_form.tx_images = this.urlimg + res.result.head_img
             this.mp_form.member_count = res.result.member_count
             this.drawPhoto()
         })
    },
    drawPhoto(){
        let _this = this
         var canvas = document.createElement("canvas");
          canvas.width = 675;
          canvas.height = 435;
          var context = canvas.getContext("2d");
          //context.rect(0 , 0 , canvas.width , canvas.height);
          // context.fillStyle = "#fff";
          // context.fill();
          
          var myImage = new Image();
          myImage.src =  require('@/assets/images/a5.png') ; //背景图片 你自己本地的图片或者在线图片
          // myImage.crossOrigin = 'Anonymous';
          myImage.onload = function(){
               context.drawImage(myImage , 0 , 0 , 675 , 435);
               context.fill();
               context.font = "50px Courier New";
               context.fillStyle = "#fff";
               context.fillText(_this.mp_form.text1,50,100);
               context.font = "30px Courier New";
               context.fillStyle = "#fff";
               context.fillText(_this.mp_form.text2,50,150);
               context.font = "20px Courier New";
               context.fillStyle = "#fff";
               context.fillText('手机:' + _this.mp_form.text3,50,190);
               context.font = "20px Courier New";
               context.fillStyle = "#fff";
               context.fillText('ID:' + _this.mp_form.text4,50,220);

               
              var myImage2 = new Image();
              myImage2.setAttribute("crossOrigin",'anonymous');  //图片跨域引入
              console.log(_this.mp_form.ewm_images,"ffff")
              myImage2.src = _this.mp_form.ewm_images ;  //二维码图片
              myImage2.onload = function(){
              context.drawImage(myImage2 ,480 , 300 , 90 , 90);
                        var myImage3 = new Image();
                        myImage3.setAttribute("crossOrigin",'anonymous');
                        myImage3.src = _this.mp_form.tx_images ;  //头像图片
                        myImage3.onload = function(){
                        context.drawImage(myImage3 ,450 ,50 , 150 , 150);
                        var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                        _this.mp_form.mplist = [base64]  //上传凭证
                  }
              }

             

          }

     },

    }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
    }
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.box{
    padding: 10px 20px;
    border-radius: 10px; 
    box-shadow: 0px 4px 9px 0px rgba(116, 77, 254, 0.1);
    margin-top: 0px;
    height:200px;
}
.box_top{
   display: flex;
}
.box_top_img{
  width:70px;
  height: 70px;
}
.box_top_img>img{
  width:100%;
  height:100%;
  border-radius:50%;
}
.box_top_con{
  margin-left:10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.box_bottom{
  display: flex;
  height: 100px;
  margin-top:20px;
}
.box_bottom_con1{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box_bottom_con1_name{
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
}
.box_bottom_con1_number{
  font-size: 30px;
  font-weight: 400;
  color: #344563;
}
.box_bottom_con1_img{
  width: 53px;
  height: 53px;
}
.box_bottom_con1_img>img{
  width:100%;
  height:100%;
}
.box_top_name{
  font-size: 18px;
  font-weight: bold;
  color: #262626;
}
.box_top_id{
  background: #EDE8FE;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #744DFE;
  padding:3px 5px;
}

.popup_box{
   position: fixed;
   left: 0;
   right:0;
   bottom: 0;
   top: 0;
}
</style>